<!DOCTYPE html>
<html>
    <head>
        <title>Todo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
        <link rel="stylesheet" href="main/style.css" type="text/css"/>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="page">
            <form id="newitem" method="get" action="http://www.google.com/search">
                <div class="input">
                    <input id="mic" onwebkitspeechchange="transcribe(this.value)" x-webkit-speech/>
                    <textarea id="name" placeholder="Вынести мусор" rows="1" tabindex="1"></textarea>
                    <a href="#" class="clear"></a>
                </div>
                <span id="clone"></span>
                <span id="return"></span>
            </form>
            <ul class="list default">
                <li class="due"><label></label><span>Задача, которая была просрочена</span></li>
                <li><label></label><span>Первая задача, вероятно что была создана раньше всех</span></li>
                <li><label></label><span>На самом деле эта задача была первой, но была перемещена</span></li>
                <li><label></label><span>Первая задача, вероятно что была создана раньше всех</span></li>
            </ul>

        </div>
        <script>

            // Speech Input Fields

            function transcribe(words) {
                $('#mic').val();
                $('#name').val(words).focus();
            }

            function isLocalStorageAvailable() {
                try {
                    return 'localStorage' in window && window['localStorage'] !== null;
                } catch (e) {
                    return false;
                }
            }

            $(document).ready(function () {
                $('#newitem textarea').on('keydown', function (e) {
                    if (e.keyCode == 13) {
                        $('.list.default').append('<li><label></label><span>' + $(this).val() + '</span></li>');
                        $(this).val('').blur();
                    }

                    if (e.keyCode == 27) {
                        $(this).val('').blur();
                    }
                });

                // Item Check

                $(document).on('click', 'label', function () {
                    $(this).append('<em></em>');
                    $(this).parent().hide();
                });

                // Clear Textarea
                $(document).on('click', '.clear', function () {
                    $('#newitem textarea').val('').focus();
                });

                // Textarea Resize

                function autoResize(element) {
                    $('#clone').html($(element).val());
                    $(element).css('width', $('#clone').width() + 30);
                    $(element).css('height', $('#clone').height());

                    // Hide Mic
                    if ($('#name').val() != '') {
                        $('#mic').hide();
                        $('.clear').show();
                    } else {
                        $('#mic').show();
                        $('.clear').hide();
                    }
                }

                $('#name').on('keydown keyup focus', function () {
                    autoResize('#name');
                });

                $('.list textarea').on('keydown keyup focus', function () {
                    autoResize('.list textarea');
                });

                // Editing

                $('.list span').on('dblclick', function () {

                    $('#return').html($(this).text());

                    $(this).replaceWith('<textarea class="edit" rows="1">' + $(this).text() + '</textarea>');

                    $('.list textarea').focus().select();

                });

                // Cancel Editing

                var onReturn = 0;

                function itemEdit() {
                    var element = '.list textarea';
                    if ($(element).val() == '') {
                        $(element).parent().remove();
                    } else {
                        $(element).replaceWith('<span>' + $(element).val() + '</span>');
                    }
                }

                function keyEsc() {
                    onReturn = 1;
                    var element = '.list textarea';
                    $(element).replaceWith('<span>' + $('#return').html() + '</span>');
                }


                $('.list textarea').on('keydown', (function (e) {
                    if (e.keyCode == 13) {
                        itemEdit();
                    }

                    if (e.keyCode == 27) {
                        keyEsc();
                    }

                }));

                $('.list textarea').on('blur', (function () {
                    if (onReturn == 0) {
                        itemEdit();
                    } else {
                        onReturn = 0;
                    }
                }));

            });
        </script>
    </body>
</html>
